<!-- 商品列表 -->
<template>
  <div>
    <!-- 搜索 -->
    <el-space wrap>
      <el-input v-model="refsearchdata.title" placeholder="输入商品名称" clearable/>
      <el-input v-model="refsearchdata.barcode" placeholder="输入商品条形码" clearable/>
      <el-select v-model="refsearchdata.status" placeholder="选择商品状态" clearable>
        <el-option v-for="item in refsoldout" :key="item.value" :label="item.name" :value="item.value"></el-option>
      </el-select>
      <el-cascader  :options="refcategory" :props="refgoodsProps" v-model="refsearchdata.categoryId" placeholder="请选择类目"
        clearable />
      <el-button type="primary" :icon="Search" @click="handleFindData">查找</el-button>
      <el-button type="primary" :icon="Plus" @click="handleaddto" v-permission='"product:product:create"'>添加</el-button>
    </el-space>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border row-key="id" style="width: 100%; margin-top: 20px;">
      <el-table-column type="selection" label="" width="50px" />
      <el-table-column type="expand" label="sku信息" align="center" width="100px">
        <template #default="props">
          <el-table :data="props.row.skuList
          " :default-expand-all='true' style="width: 100%" border>
            <el-table-column prop="barCode" label="商品条码" align="center" />
            <el-table-column prop="title" label="商品规格" align="center" />
            <el-table-column prop="stock" label="商品库存" align="center">
              <template #default="scope">{{scope.row.stock}}</template>
            </el-table-column>
            <el-table-column prop="originalPrice" label="原价" align="center" />
            <el-table-column prop="price" label="现价" align="center" />
            <el-table-column prop="vipPrice" label="VIP价格" align="center" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="商品ID" prop="id" align="center" />
      <el-table-column label="名称" prop="title" align="center" width="300px"/>
      <el-table-column label="图片" prop="name" align="center">
        <template #default="scope">
          <img :src="scope.row.img" mode="heightFix" style="width:35px;height: 35px;" />
        </template>
      </el-table-column>
      <el-table-column label="商品详细介绍" prop="name" align="center" width="130px">
        <template #default="scope">
          <el-button type="primary" @click="handlesee(scope.row)"  v-permission='"product:product:detail"'>查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="类目ID" prop="categoryId" align="center" />
      <el-table-column label="邮费模板ID" prop="freightTemplateId" align="center" width="100px"/>
      <el-table-column label="销量" prop="sales" align="center" />
      <el-table-column label="单位" prop="unit" align="center" />
      <el-table-column label="是否在售" prop="status" align="center" width="100px">
        <template #default="scope">
          <el-tag :type="scope.row.status==0?'warning':'success'">{{scope.row.status==0?'未售':'在售'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" align="center" />
      <el-table-column label="操作" width="200%" align="center">
        <template #default="scope">
          <el-button type="primary" @click="handleedit(scope.row)" v-permission='"product:product:edit"'>编辑</el-button>
          <el-button :type="scope.row.status==0?'warning':'success'" @click="handlesoldStatus(scope.row)">
            {{scope.row.status==0?'下架':'上架'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <PagingList @Change="giterList" :listdata="listdata"></PagingList>

    <!-- 查看窗口 -->
    <el-dialog v-model="dialogVisible" title="查看详情" width="55%">
      <span v-html="picture" style="text-algin:center;" class="spanimg"></span>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { Search, Plus } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue';
import { TypeProduct, TypeFair, Typecategory } from "#/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { post } from "@/utils/request";
import PagingList from "../../components/specialfunctions/PagingList.vue";
import router from '@/router';



const refsoldout = reactive([{ name: '未售', value: 0 }, { name: '在售', value: 1 }, { name: '全部', value: '' }])
const refgoodsProps = reactive({ // 商品定义规则
  label: "title",
  children: "childrenList",
  value: "id",
  checkStrictly: true,
  emitPath: false
})
const refcategory: Typecategory[] = reactive([])//商品列表数据
const refsearchdata = reactive({ //搜索绑定的数据
  categoryId: '',
  title: '',
  barcode: '',
  status: null
})
let picture = ref('')//图片
//分页数据
let listdata = reactive(new TypeFair());
//获取下一页的数据并赋值
const giterList = (e: { page: number; limit: number; total: number; flog: { valueOf: () => boolean }; targetAdminId?: undefined; }) => {
  listdata = e;
  handleproductlist();
};
let dialogVisible = ref(false)
const tableData: TypeProduct[] = reactive([])
const loading = ref(true)//赖加载表格数据

/**
 * 初始化数据
 */
function handleproductlist() {
  let data = {
    _gp: 'admin.product',
    _mt: 'list',
    page: listdata.page,
    limit: listdata.limit,
    categoryId: listdata.categoryId,
    title: listdata.title,
    barcode: listdata.barcode,
    status: listdata.status
  }
  post(data).then(res => {
    let { data, errno, errmsg } = res
    if (200 == errno) {
      tableData.length = 0
      tableData.push(...data.items)
      listdata.total = data.total
      loading.value = false
    } else {
      ElMessage.error(errmsg)
    }
  })

  let datas = {
    _gp: 'admin.category',
    _mt: 'categoryTree',
  }
  post(datas).then(res => {
    console.log(res);
    let { errno, errmsg } = res
    if (200 == errno) {
      refcategory.length = 0
      refcategory.push(...res.data)
    }
  })
}
handleproductlist()

/**
 * 查看
 */
function handlesee(row: { id: number }) {
  dialogVisible.value = true
  let data = {
    _gp: 'admin.product',
    _mt: 'detail',
    spuId: row.id,
  }
  post(data).then(res => {
    let { data, errno, errmsg } = res
    if (200 == errno) {
      picture.value = data.detail.replace(/width="750px"/g, 'width="790px"')
    } else {
      ElMessage.error(errmsg)
    }
  })
}

/**
 * 查找
 */
function handleFindData() {
  listdata.barcode = refsearchdata.barcode
  listdata.categoryId = refsearchdata.categoryId
  listdata.title = refsearchdata.title
  listdata.status = refsearchdata.status
  handleproductlist()
}

/**
 * 改变状态
 */
function handlesoldStatus(row: { status: number, id: number }) {
  let data = {
    _gp: 'admin.product',
    _mt: 'freezeOrActivation',
    spuId: row.id,
    status: row.status ? 0 : 1
  }
  post(data).then((res) => {
    let { errmsg, errno } = res
    if (200 === errno) {
      ElMessage.success(row.status ? '下架成功' : '上架成功')
      handleproductlist()
    } else {
      ElMessage.error(errmsg)
    }
  })
}

/**
 * 跳转创建页面
 */
function handleaddto() {
  router.push({path:'producsetup'})
}

/**
 * 跳转编辑页面
 */
function handleedit(row:{id:any}) {
  router.push({path:`producamend/${row.id}`,query:row.id})
}
</script>

<style lang="less">

</style>
